<script setup>
import {
  GetListAPI,
  AddDataAPI,
  EditDataAPI,
  DelDataAPI,
  GetDetailsAPI,
} from "@/api/system/auxiliarySettings/instructions";
import SubmitForm from "./submitForm.vue";
const { proxy } = getCurrentInstance();

/**
 * 字典查询
 */
const { equipment_status } = proxy.useDict("equipment_status");

/**
 * 模糊查询枚举
 */
const selectList = ref([
  { type: "日期范围" },
  { label: "计划指令", model: "instructInfo", type: "输入框" },
  {
    label: "状态",
    model: "status",
    type: "下拉单选",
    opt: equipment_status,
  },
]);

/**
 * 表格枚举
 */
const columns = ref([
  { label: "计划指令", prop: "instructInfo" },
  { label: "状态", prop: "status" },
  { label: "备注", prop: "remark" },
  { label: "创建人", prop: "createBy" },
  { label: "创建时间", prop: "createTime" },
  { label: "操作", prop: "x" },
]);

/**
 * 按钮枚举
 */
const buttonList = ref([
  { type: "add", hasPermi: "system:instructions:add" },
  { type: "import", hasPermi: "system:instructions:import" },
  { type: "export", hasPermi: "system:instructions:export" },
]);

/**
 * 表格数据
 */
const tableData = ref([]);

/**
 * 表单实例
 */
const submitFormRef = ref(null);

/**
 * 新增修改表单
 */
const submitForm = ref({});

/**
 * 查询表单
 */
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: "新增",
  row: [],
  ids: [],
});

/**
 * 新增弹窗
 */
const addDic = () => {
  state.title = "新增";
  state.isShow = true;
};

/**
 * 修改弹窗
 */
const editDic = async (id) => {
  try {
    state.btnLoading = true;
    const { data: result } = await GetDetailsAPI(id);
    submitForm.value = result;
    state.title = "修改";
    state.isShow = true;
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 查看弹窗
 */
const lookDic = async (id) => {
  try {
    state.btnLoading = true;
    const { data: result } = await GetDetailsAPI(id);
    submitForm.value = result;
    state.title = "查看";
    state.isShow = true;
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 弹窗关闭
 */
const closeDic = () => {
  state.isShow = false;
  submitForm.value = {};
};

/**
 * 新增
 */
const addSub = async () => {
  try {
    state.btnLoading = true;
    const result = await submitFormRef.value.submit();
    await AddDataAPI(result);
    closeDic();
    proxy.successMsg("新增成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 修改
 */
const editSub = async () => {
  try {
    state.btnLoading = true;
    const result = await submitFormRef.value.submit();
    await EditDataAPI(result);
    closeDic();
    proxy.successMsg("修改成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 修改状态
 */
const changeStatus = async (val) => {
  console.log("----");
  const result = await proxy.MessageBox(
    `是否修改状态为${val.status == 0 ? "不启用" : "启用"}?`
  );

  if (!result) {
    val.status == 1 ? (val.status = 0) : (val.status = 1);
    return;
  }
  try {
    console.log("---");
    await EditDataAPI({
      id: val.id,
      status: val.status,
    });
    proxy.successMsg("修改成功!");
    getList();
  } catch {
    val.status == 1 ? (val.status = 0) : (val.status = 1);
  } finally {
  }
};

/**
 * 删除
 */
const remove = async (id) => {
  try {
    proxy.loading("删除中，请稍后");
    await DelDataAPI(id);
    closeDic();
    proxy.successMsg("删除成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 模糊查询
 */
const selectSubmit = (val) => {
  console.log(val, "va");
  val.createTimeS = val.beginTime;
  val.createTimeE = val.endTime;

  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]));
  getList();
};

/**
 * 列表复选框
 */
const handleSelectionChange = ({ row, ids }) => {
  state.ids = ids;
  state.row = row;
};

/**
 * 查询列表
 */
const getList = async () => {
  try {
    state.loading = true;
    const result = await GetListAPI(query);
    state.total = result.total;
    tableData.value = result.rows;
  } catch (err) {
    console.error(err);
  } finally {
    state.loading = false;
  }
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />
    <el-card>
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        :loading="state.loading"
        :data="tableData"
        :column="columns"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #buttons
          ><p-button
            :list="buttonList"
            @add="addDic"
            @export="
              proxy.download(
                '/system/planningInstruction/instructionExport',
                {}
              )
            "
            @import="getList"
            :url="'/system/planningInstruction/instructionExportError'"
            :templateUrl="'/system/planningInstruction/download/excel'"
            :importUrl="'/system/planningInstruction/importData'"
          />
        </template>
        <template #columnCell="{ column, record }">
          <p-switch
            v-if="column.prop == 'status'"
            @change="changeStatus(record)"
            v-model="record.status"
          />
          <!-- @change="changeStatus(record)" -->
          <p-operate
            :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                disabled: false,
                text: '修改',
                type: 'primary',
                hasPermi: 'system:instructions:edit',
              },
              {
                icon: 'DeleteFilled',
                emit: 'remove',
                disabled: false,
                text: '删除',
                isDel: true,
                type: 'danger',
                hasPermi: 'system:instructions:remove',
              },
            ]"
            v-if="column.prop == 'x'"
            @edit="editDic(record.id)"
            @remove="remove(record.id)"
          />
        </template>
      </p-table>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog
      v-model="state.isShow"
      :title="state.title"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
      width="500px"
    >
      <SubmitForm
        ref="submitFormRef"
        :data="submitForm"
        :disabled="state.title == '查看'"
      />
    </p-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
